Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixing marker placement #1695

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

jvaskonen
Copy link

Most of the marker placement has been a little off since the switch to leaflet. The spawn marker being the exception.

I saw the spawn marker had an icon size and icon anchor defined, so I initially tried adding those attributes to the other icons. That didn't work becasue the spawn marker uses leaflet's icon type and the other markers use divIcon, so these attributes move around the div the icon image is parked in, not the icon image, and the results were still whack.

Next I tried just making the other marker icons 'icons' instead of 'divIcons' since the icons seem to work. That was all good unless there were markers packed together. Then the results were still a bit off.

So, I borrowed the style leaflet applies to the images when rendering 'icon's, and stuffed it into the image that's in the marker's divIcon. That got the icon right at the corner of the poi closest to the observer. I tried bumping the margin back a little more to get the image into the center of the block, but within the div, any margin less than -1 * icon_height just behaves like margin -1 * icon_height (at least that's how it is in firefox because html styling is voodoo). So, that's why there's an iconAnchor too -- it makes the bottom of the icon more middle-of-the-block.

I put the popup anchor a bit above the top of the icon becasue when it opens on top of the icon it annoys me.

Caveats:
This code assumes icons are 32x37 like the ones overviewer ships with. Other sized icons (like the player avatar icons generated by https://overviewer.org/avatar/XYZ) are still a little off.
I'm not sure if leaflet generates different style code for firefox and other browsers, so the style code I lifted could be firefox-specific leaflet generated stuff, and not safe pass on to non-firefox browsers.

Random:
All in all, this is another example of, after working for hours, the commit is like 10 lines, and I'm like, "wow, really, that's where half my day went..." The sad thing is, most of the POIs I was trying to update are still wrong becasue my world has changed since last running aronud collecting coordinates for them.

Most of the marker placement has been a little off since the switch to leaflet. The spawn marker being the exception.

I saw the spawn marker had an icon size and icon anchor defined, so I initially tried adding those attributes to the other icons. That didn't work becasue the spawn marker uses leaflet's icon type and the other markers use divIcon, so these attributes move around the div the icon image is parked in, not the icon image, and the results were still whack.

Next I tried just making the other marker icons 'icons' instead of 'divIcons' since the icons seem to work. That was all good unless there were markers packed together. Then the results were still a bit off.

So, I borrowed the style leaflet applies to the images when rendering 'icon's, and stuffed it into the image that's in the marker's divIcon. That got the icon right at the corner of the poi closest to the observer. I tried bumping the margin back a little more to get the image into the center of the block, but within the div, any margin less than -1 * icon_height just behaves like margin -1 * icon_height (at least that's how it is in firefox because html styling is voodoo). So, that's why there's an iconAnchor too -- it makes the bottom of the icon more middle-of-the-block.

I put the popup anchor a bit above the top of the icon becasue when it opens on top of the icon it annoys me.

Caveats:
This code assumes icons are 32x37 like the ones overviewer ships with. Other sized icons (like the player avatar icons generated by https://overviewer.org/avatar/XYZ) are still a little off.
I'm not sure if leaflet generates different style code for firefox and other browsers, so the style code I lifted could be firefox-specific leaflet generated stuff, and not safe pass on to non-firefox browsers.

Random:
All in all, this is another example of, after working for hours, the commit is like 10 lines, and I'm like, "wow, really, that's where half my day went..." The sad thing is, most of the POIs I was trying to update are still wrong becasue my world has changed since last running aronud collecting coordinates for them.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant